<script setup>
import { ref } from 'vue'
const updateData1 = () => {
  option1.value.series[0].data[0].value = Math.floor(Math.random() * 100)
}
const updateData2 = () => {
  option2.value.series[0].data[0].value = Math.floor(Math.random() * 100)
}
const updateData3 = () => {
  option3.value.series[0].data[0].value = Math.floor(Math.random() * 100)
}
// 刷新页面也可以等于点击更新

const option1 = ref({
  title: {
    style: {
      fill: '#fff'
    }
  },
  series: [
    {
      type: 'gauge',
      data: [{ name: 'itemA', value: 55 }],
      center: ['50%', '55%'],
      axisLabel: {
        formatter: '{value}%',
        style: {
          fill: '#fff'
        }
      },
      axisTick: {
        style: {
          stroke: '#fff'
        }
      },
      animationCurve: 'easeInOutBack'
    }
  ]
})

const option2 = ref({
  series: [
    {
      type: 'gauge',
      data: [{ name: 'itemA', value: 55 }],
      center: ['50%', '55%'],
      axisLabel: {
        formatter: '{value}%',
        style: {
          fill: '#fff'
        }
      },
      axisTick: {
        style: {
          stroke: '#fff'
        }
      },
      animationCurve: 'easeInOutBack'
    }
  ]
})

const option3 = ref({
  title: {
    style: {
      fill: '#fff'
    }
  },
  series: [
    {
      type: 'gauge',
      data: [{ name: 'itemA', value: 55 }],
      center: ['50%', '55%'],
      axisLabel: {
        formatter: '{value}%',
        style: {
          fill: '#fff'
        }
      },
      axisTick: {
        style: {
          stroke: '#fff'
        }
      },
      animationCurve: 'easeInOutBack'
    }
  ]
})

// 消耗占比

const conf = ref({
  lineWidth: 24,
  digitalFlopStyle: {
    fill: 'pink'
  },
  data: [
    {
      name: '杭州',
      value: 98
    },
    {
      name: '金华',
      value: 150
    },
    {
      name: '宁波',
      value: 62
    },
    {
      name: '太原',
      value: 54
    }
  ]
})

// 库存预警
const config = ref({
  indexHeader: '编号',
  header: ['物料', '仓库', '库存', '状态'],
  data: [
    ['可乐', '事件仓', '1100', '正常'],
    ['雪碧', '饮料仓', '1230', '不正常'],
    ['冰红茶', '奶茶仓', '4557', '不正常'],
    ['蜜雪', '奶茶仓', '573', '正常'],
    ['瑞幸', '奶茶仓', '2752', '正常'],
    ['东腾特饮', '饮料仓', '725732', '不正常'],
    ['红牛', '饮料仓', '32757', '正常'],
    ['外星人', '饮料仓', '474', '不正常'],
    ['AD钙', '事件仓', '514274', '不正常'],
    ['营养快线', '事件仓', '575', '正常']
  ],
  index: true,
  headerBGC: '#43a',
  oddRowBGC: '#4586f1',
  evenRowBGC: 'skyblue',
  align: ['center']
})

const cityName = ref('总数')
const cityValue = ref(100)

const addData = () => {
  if (!cityName.value || !cityValue.value) return

  conf.value.data.push({
    name: cityName.value,
    value: parseInt(cityValue.value)
  })
}
</script>

<template>
  <div style="height: 718px">
    <!-- 能源总览 -->
    <div demo-bg style="height: 220px; width: 100%">
      <dv-border-box8 :dur="5">
        <div dv-bg>
          <div small-bg style="margin-left: 30%">
            <dv-decoration-11 style="width: 220px; height: 60px">
              <div color-green font-600 bg="~ dark/0">能源总览</div>
            </dv-decoration-11>
          </div>
          <div style="height: 160px; display: flex">
            <div style="width: 30%">
              <dv-charts
                @click="updateData1"
                :option="option1"
                style="width: 12rem; height: 9rem"
              />
              <span
                style="
                  margin-left: 70px;
                  margin-top: -47px;
                  box-sizing: border-box;
                  position: absolute;
                "
                ><el-link :underline="false" type="primary" @click="updateData1"
                  >耗电量</el-link
                ></span
              >
            </div>
            <div style="width: 30%">
              <dv-charts
                @click="updateData2"
                :option="option2"
                style="width: 12rem; height: 9rem"
              />
              <span
                style="
                  margin-left: 70px;
                  margin-top: -47px;
                  box-sizing: border-box;
                  position: absolute;
                "
                ><el-link :underline="false" type="success" @click="updateData2"
                  >耗水量</el-link
                ></span
              >
            </div>
            <div style="width: 30%">
              <dv-charts
                @click="updateData3"
                :option="option3"
                style="width: 12rem; height: 9rem"
              />
              <span
                style="
                  margin-left: 70px;
                  margin-top: -47px;
                  box-sizing: border-box;
                  position: absolute;
                "
                ><el-link :underline="false" type="warning" @click="updateData3"
                  >碳排放量</el-link
                ></span
              >
            </div>
          </div>
        </div>
      </dv-border-box8>
    </div>
    <!-- 消耗占比 -->
    <div demo-bg style="height: 220px; width: 100%; margin-top: 20px">
      <dv-border-box8 :dur="5" style="height: 300px">
        <div dv-bg>
          <div small-bg style="margin-left: 30%">
            <dv-decoration-11 style="width: 300px; height: 60px">
              <div color-green font-600 bg="~ dark/0">消耗占比</div>
            </dv-decoration-11>
          </div>
          <div style="height: 220px">
            <div
              style="margin-top: -62px; margin-left: 130px"
              flex="~ col"
              justify-center
              items-center
              bg-dark
              @click="addData"
            >
              <dv-active-ring-chart
                @click="addData"
                :config="conf"
                style="width: 300px; height: 300px"
              />
              <div
                flex="~ col"
                gap2
                justify-center
                items-center
                @click="addData"
              ></div>
            </div>
          </div>
        </div>
      </dv-border-box8>
    </div>
    <!-- 库存预警 -->
    <div demo-bg style="height: 200px; width: 100%; margin-top: 100px">
      <dv-border-box8 :dur="5" style="height: 280px">
        <div dv-bg>
          <div small-bg style="margin-left: 30%">
            <dv-decoration-11 style="width: 300px; height: 60px">
              <div color-green font-700 bg="~ dark/0">库存预警</div>
            </dv-decoration-11>
          </div>
          <div style="height: 190px; display: flex; margin-top: 5px">
            <dv-scroll-board
              :config="config"
              style="
                width: 100%;
                height: 200px;
                margin-left: 5px;
                margin-right: 10px;
              "
            />
          </div>
        </div>
      </dv-border-box8>
    </div>
    <!-- ---- -->
  </div>
</template>

<style lang="scss" scoped></style>
